<template>
  <div class="nav" @mouseleave="navTitleIndex = 0">
    <div class="nav-content">
      <ul class="title-brod">
        <li
          class="nav-title"
          @mouseenter="entNavTitle(1)"
          :class="{ active: navTitleIndex === 1 }"
        >
          西红柿
          <ul v-show="navTitleIndex === 1" style="position:absolute">
            <li>炒鸡蛋</li>
            <li>炒鸡蛋</li>
            <li>炒鸡蛋</li>
            <li>炒鸡蛋</li>
          </ul>
        </li>
        <li
          class="nav-title"
          @mouseenter="entNavTitle(2)"
          :class="{ active: navTitleIndex === 2 }"
        >
          西红柿
          <ul v-show="navTitleIndex === 2" style="position:absolute">
            <li>炒鸡蛋</li>
            <li>炒鸡蛋</li>
            <li>炒鸡蛋</li>
            <li>炒鸡蛋</li>
          </ul>
        </li>
        <li
          class="nav-title"
          @mouseenter="entNavTitle(3)"
          :class="{ active: navTitleIndex === 3 }"
        >
          西红柿
          <ul v-show="navTitleIndex === 3" style="position:absolute">
            <li>炒鸡蛋</li>
            <li>炒鸡蛋</li>
            <li>炒鸡蛋</li>
            <li>炒鸡蛋</li>
          </ul>
        </li>
        <li
          class="nav-title"
          @mouseenter="entNavTitle(4)"
          :class="{ active: navTitleIndex === 4 }"
        >
          西红柿
          <ul v-show="navTitleIndex === 4" style="position:absolute">
            <li>炒鸡蛋</li>
            <li>炒鸡蛋</li>
            <li>炒鸡蛋</li>
            <li>炒鸡蛋</li>
          </ul>
        </li>
        <li
          class="nav-title"
          @mouseenter="entNavTitle(5)"
          :class="{ active: navTitleIndex === 5 }"
        >
          西红柿
          <ul v-show="navTitleIndex === 5" style="position:absolute">
            <li>炒鸡蛋</li>
            <li>炒鸡蛋</li>
            <li>炒鸡蛋</li>
            <li>炒鸡蛋</li>
          </ul>
        </li>
      </ul>
    </div>
    <h2 style="position:fixed">{{ navTitleIndex }}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navTitleIndex: 0,
      showN: false, //展示下拉
    };
  },
  methods: {
    entNavTitle(index) {
      this.navTitleIndex = index;

      let navContent = document.getElementsByClassName("nav-content");
      navContent[0].style.width = "100%";
      navContent[0].style.height = "360px";
      navContent[0].style.position='absolute'
    },
  },
  watch: {
    // 监听 navTitleIndex，当他等于0时，
    navTitleIndex: function(newValue, oldValue) {
      console.log(newValue,oldValue);
      if (newValue == 0) {
        let navContent = document.getElementsByClassName("nav-content");
        navContent[0].style.width = "70%";
        navContent[0].style.height = "90px";
        navContent[0].style.position='relative'
      }
    },
  },
};
</script>

<style scoped>
.nav {
}
.nav-content {
  margin: 0 auto;
  width: 70%;
  height: 90px;
  background-color: #eee;
}
.title-brod{
  text-align: center;
}
.nav-title {
  display: inline-block;
}
.active {
  border-bottom: 1px solid #000;
}
</style>
